<script setup lang="ts">
import type { IRouteInfoResp } from '@/api/types'
import { computed, ref } from 'vue'

interface Props {
  /** 是否显示弹窗 */
  visible: boolean
  /** 当前选中的路由项 */
  currentRoute?: IRouteInfoResp
  /** 所有路由数据 */
  allRoutes: IRouteInfoResp[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:visible': [visible: boolean]
  'route-click': [route: IRouteInfoResp]
  'close': []
}>()

// 当前展示的子路由列表
const currentSubRoutes = computed(() => {
  if (!props.currentRoute?.children) {
    return []
  }
  // 移除 isHidden 过滤条件，显示所有二级路由
  return props.currentRoute.children
})

// 当前选中的二级路由
const selectedSecondRoute = ref<IRouteInfoResp | null>(null)

// 当前展示的三级路由列表
const currentThirdRoutes = computed(() => {
  if (!selectedSecondRoute.value?.children) {
    return []
  }
  // 移除 isHidden 过滤条件，显示所有三级路由
  return selectedSecondRoute.value.children
})

// 处理弹窗关闭
function handleClose() {
  emit('update:visible', false)
  emit('close')
  // 重置选中状态
  selectedSecondRoute.value = null
}

// 处理二级路由点击
function handleSecondRouteClick(route: IRouteInfoResp) {
  // 检查是否有子路由（不过滤隐藏的路由）
  const hasChildren = route.children && route.children.length > 0

  if (hasChildren) {
    // 有子路由，展开三级菜单
    selectedSecondRoute.value = selectedSecondRoute.value?.id === route.id ? null : route
  }
  else {
    // 没有子路由，直接跳转
    emit('route-click', route)
    handleClose()
  }
}

// 处理三级路由点击
function handleThirdRouteClick(route: IRouteInfoResp) {
  emit('route-click', route)
  handleClose()
}

// 获取路由图标
function getRouteIcon(route: IRouteInfoResp): string {
  if (route.icon) {
    return route.icon.startsWith('i-') ? route.icon : `i-carbon-${route.icon}`
  }
  return 'i-carbon-chevron-right'
}

// 获取路由颜色
function getRouteColor(route: IRouteInfoResp, level: number): string {
  const colors = {
    2: 'bg-blue-100',
    3: 'bg-green-100',
  }
  return colors[level as keyof typeof colors] || 'bg-gray-500'
}
</script>

<template>
  <sar-popup
    :visible="visible"
    effect="slide-left"
    :mask-closable="true"
    @update:visible="handleClose"
  >
    <view class="h-full w-80 from-gray-50 to-white bg-gradient-to-b pt-6">
      <!-- 头部 -->
      <view class="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3 shadow-sm">
        <view class="flex items-center">
          <view
            v-if="currentRoute"
            class="mr-3 h-8 w-8 flex items-center justify-center rounded-full"
            :class="getRouteColor(currentRoute, 1)"
          >
            <view
              class="text-sm text-white"
              :class="getRouteIcon(currentRoute)"
            />
          </view>
          <text class="text-lg text-gray-800 font-semibold">
            {{ currentRoute?.title || '子菜单' }}
          </text>
        </view>
        <view
          class="i-carbon-close h-6 w-6 cursor-pointer text-gray-500 hover:text-gray-700"
          @click="handleClose"
        />
      </view>

      <!-- 内容区域 -->
      <view class="h-full flex">
        <!-- 二级路由列表 -->
        <view class="w-40 border-r border-gray-200 bg-white">
          <scroll-view scroll-y class="h-full">
            <view class="p-2">
              <view
                v-for="route in currentSubRoutes"
                :key="route.id"
                class="mb-1 flex cursor-pointer items-center rounded-lg p-3 transition-colors hover:bg-gray-100"
                :class="{
                  'bg-blue-50 border-l-4 border-blue-500': selectedSecondRoute?.id === route.id,
                }"
                @click="handleSecondRouteClick(route)"
              >
                <view
                  class="mr-2 h-6 w-6 flex items-center justify-center rounded-full"
                  :class="getRouteColor(route, 2)"
                >
                  <view
                    class="text-xs text-white"
                    :class="getRouteIcon(route)"
                  />
                </view>
                <view class="min-w-0 flex-1">
                  <text class="text-sm text-gray-700 font-medium">{{ route.title }}</text>
                </view>
                <view
                  v-if="route.children && route.children.length > 0"
                  class="i-carbon-chevron-right h-4 w-4 text-gray-400 transition-transform"
                  :class="{
                    'rotate-90': selectedSecondRoute?.id === route.id,
                  }"
                />
              </view>
            </view>
          </scroll-view>
        </view>

        <!-- 三级路由列表 -->
        <view class="flex-1 bg-gray-50">
          <scroll-view scroll-y class="h-full">
            <view v-if="currentThirdRoutes.length > 0" class="p-2">
              <view class="mb-2 px-2">
                <text class="text-xs text-gray-500 font-medium">
                  {{ selectedSecondRoute?.title }}
                </text>
              </view>
              <view
                v-for="route in currentThirdRoutes"
                :key="route.id"
                class="mb-1 flex cursor-pointer items-center rounded-lg bg-white p-3 shadow-sm transition-all hover:shadow-md"
                @click="handleThirdRouteClick(route)"
              >
                <view
                  class="mr-3 h-6 w-6 flex items-center justify-center rounded-full"
                  :class="getRouteColor(route, 3)"
                >
                  <view
                    class="text-xs text-white"
                    :class="getRouteIcon(route)"
                  />
                </view>
                <view class="min-w-0 flex-1">
                  <text class="text-sm text-gray-700 font-medium">{{ route.title }}</text>
                </view>
                <view class="i-carbon-chevron-right h-4 w-4 text-gray-400" />
              </view>
            </view>
            <view v-else-if="selectedSecondRoute" class="flex flex-col items-center justify-center py-12">
              <view class="i-carbon-folder-off mb-3 text-4xl text-gray-300" />
              <text class="text-sm text-gray-500">暂无子菜单</text>
            </view>
            <view v-else class="flex flex-col items-center justify-center py-12">
              <view class="i-carbon-touch-1 mb-3 text-4xl text-gray-300" />
              <text class="text-sm text-gray-500">请选择左侧菜单</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </sar-popup>
</template>

<style scoped>
/* 仅用于UnoCSS无法实现的样式 */
.rotate-90 {
  transform: rotate(90deg);
}
</style>
